import React, { memo, useMemo } from "react";
import { connect } from "react-redux";

import { WarpDiv } from "./style";

const Content = memo(function Index(props) {
  const { activeId, files, openIds } = props;

  //缓存值，避免text-area重复刷新，当前看效果不明显，大数据量下能提高效率
  const getValue = useMemo(() => {
    if (openIds.length === 0 || activeId === "") {
      return "";
    } else {
      if (files[activeId]) {
        return files[activeId].content;
      }
      return "";
    }
  }, [openIds, activeId, files]);

  return (
    <WarpDiv>
      <textarea className="input-area" value={getValue}></textarea>
    </WarpDiv>
  );
});

export default connect((state) => ({
  activeId: state.files.activeFileId,
  openIds: state.files.openedFilesIdArr,
  files: state.files.filesObj,
}))(Content);
